<template>
  <div class="details">
    <!-- 头部导航 -->
    <van-nav-bar
      title="详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    >
      <template #right>
        <van-popover
          v-model:show="showPopover"
          theme="dark"
          placement="bottom-end"
        >
          <template #default>
            <ul class="popover">
              <li
                v-for="item in actions"
                :key="item"
                @click="$router.push(item.to)"
              >
                <van-icon :name="item.icon" />
                {{ item.text }}
              </li>
            </ul>
          </template>
          <template #reference>
            <van-icon name="weapp-nav" />
          </template>
        </van-popover>
      </template>
    </van-nav-bar>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="skyblue">
      <van-swipe-item v-for="item in bannerList" :key="item">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="title">
      <span>￥{{ detailinfo.originprice }}</span>
      <p>
        {{ detailinfo.proname }}
        <span>自营</span>
      </p>
    </div>
    <!-- 底部导航 -->
    <van-action-bar route>
      <van-action-bar-icon
        icon="cart-o"
        text="购物车"
        :badge="num"
        to="/cart"
      />
      <van-action-bar-button
        type="warning"
        @click="addCart"
        text="加入购物车"
      />
      <van-action-bar-button type="danger" text="立即购买" />
    </van-action-bar>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getDetailInfo, addCartList } from "../server/detail";
import { getCarList } from "../server/cart";
const route = useRoute();
const router = useRouter();
let showPopover = ref(false);
let detailinfo = ref({});
let bannerList = ref([]);
let num = ref("");
const actions = ref([
  { text: "首页", to: "/home", icon: "wap-home-o" },
  { text: "购物车", to: "/cart", icon: "shopping-cart-o" },
  { text: "分享", to: "/details", icon: "share" },
]);

// 获取轮播图数据
onMounted(() => {
  getDetailInfo(`${route.query.id}`).then((res) => {
    detailinfo.value = res.data;
    bannerList.value = res.data.banners[0].split(",");
  });
  getCarList({ userid: localStorage.getItem("userid") }).then((res) => {
    if (res.data) num.value = res.data.length;
  });
});
//  加入购物车
function addCart() {
  addCartList({
    userid: localStorage.getItem("userid"),
    proid: route.query.id,
    num: 1,
  }).then((res: any) => {
    if (res.code === "200") {
      getCarList({ userid: localStorage.getItem("userid") }).then((res) => {
        num.value = res.data.length;
      });
    }
  });
}
</script>

<style scoped>
.details {
  width: 100%;
  overflow-y: auto;
  height: 100%;
  background-color: rgb(246, 246, 246);
}
.my-swipe {
  width: 100%;
  height: 23.4375rem;
}
.van-swipe-item {
  width: 100%;
}
.van-swipe-item > img {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.title {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.title > span {
  font-size: 1.25rem;
  line-height: 1;
  font-weight: 600;
  color: #ee0a24;
}
.title > p {
  margin: 0.625rem 0 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.375rem;
  position: relative;
  padding: 0 0.9375rem;
  box-sizing: border-box;
  text-indent: 38px;
}
.title > p > span {
  display: block;
  position: absolute;
  left: 0.625rem;
  top: 0;
  width: 2.25rem;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  text-indent: 0;
  background-color: #ee0a24;
  color: #fff;
  font-size: 0.75rem;
}
.popover {
  width: 6.25rem;
  padding: 0.625rem 0.3125rem 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 6.25rem;
}
.popover > li {
  width: 100%;
  flex: 1;
}
.popover > li > i {
  margin: 0 0.625rem;
}
</style>
